<template>
  <div class="settings-notification">
    <a-card class="settings-card">
      <template #title>商户通知设置</template>
      <a-form :model="notificationSettings" layout="vertical">
        <div class="settings-group">
          <div class="group-title">订单通知</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="newOrder">
                <template #label>
                  <div class="setting-label">
                    <span>新订单提醒</span>
                    <a-tag color="red">重要</a-tag>
                  </div>
                  <div class="setting-desc">接收新订单提醒，及时处理订单</div>
                </template>
                <a-switch v-model="notificationSettings.newOrder" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="orderCancel">
                <template #label>
                  <div class="setting-label">
                    <span>订单取消提醒</span>
                    <a-tag color="orange">提醒</a-tag>
                  </div>
                  <div class="setting-desc">买家取消订单时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.orderCancel" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="orderRefund">
                <template #label>
                  <div class="setting-label">
                    <span>退款申请提醒</span>
                    <a-tag color="red">重要</a-tag>
                  </div>
                  <div class="setting-desc">买家申请退款时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.orderRefund" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="orderTimeout">
                <template #label>
                  <div class="setting-label">
                    <span>订单超时提醒</span>
                    <a-tag color="red">重要</a-tag>
                  </div>
                  <div class="setting-desc">订单即将超时时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.orderTimeout" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="settings-group">
          <div class="group-title">商品通知</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="stockWarning">
                <template #label>
                  <div class="setting-label">
                    <span>库存预警</span>
                    <a-tag color="red">重要</a-tag>
                  </div>
                  <div class="setting-desc">商品库存不足时接收提醒</div>
                </template>
                <a-space direction="vertical" style="width: 100%">
                  <a-switch
                    v-model="notificationSettings.stockWarning.enabled"
                  />
                  <a-input-number
                    v-if="notificationSettings.stockWarning.enabled"
                    v-model="notificationSettings.stockWarning.threshold"
                    placeholder="请设置预警阈值"
                    :min="1"
                    :max="100"
                    style="width: 200px"
                  />
                </a-space>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="offShelf">
                <template #label>
                  <div class="setting-label">
                    <span>商品下架提醒</span>
                    <a-tag color="orange">提醒</a-tag>
                  </div>
                  <div class="setting-desc">商品被系统自动下架时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.offShelf" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="settings-group">
          <div class="group-title">评价通知</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="newComment">
                <template #label>
                  <div class="setting-label">
                    <span>新评价提醒</span>
                    <a-tag color="orange">提醒</a-tag>
                  </div>
                  <div class="setting-desc">收到新的商品评价时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.newComment" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="badComment">
                <template #label>
                  <div class="setting-label">
                    <span>差评提醒</span>
                    <a-tag color="red">重要</a-tag>
                  </div>
                  <div class="setting-desc">收到差评或投诉时立即接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.badComment" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="settings-group">
          <div class="group-title">营销通知</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="promotionStart">
                <template #label>
                  <div class="setting-label">
                    <span>活动开始提醒</span>
                    <a-tag color="orange">提醒</a-tag>
                  </div>
                  <div class="setting-desc">促销活动开始时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.promotionStart" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="promotionEnd">
                <template #label>
                  <div class="setting-label">
                    <span>活动结束提醒</span>
                    <a-tag color="orange">提醒</a-tag>
                  </div>
                  <div class="setting-desc">促销活动结束前接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.promotionEnd" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <div class="settings-group">
          <div class="group-title">财务通知</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item field="withdrawSuccess">
                <template #label>
                  <div class="setting-label">
                    <span>提现到账提醒</span>
                    <a-tag color="green">通知</a-tag>
                  </div>
                  <div class="setting-desc">提现成功到账时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.withdrawSuccess" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item field="settlementComplete">
                <template #label>
                  <div class="setting-label">
                    <span>结算完成提醒</span>
                    <a-tag color="green">通知</a-tag>
                  </div>
                  <div class="setting-desc">周期结算完成时接收提醒</div>
                </template>
                <a-switch v-model="notificationSettings.settlementComplete" />
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <a-form-item>
          <a-button type="primary" @click="handleSaveSettings" :loading="loading">
            保存设置
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { Message } from "@arco-design/web-vue";
import axios from "@/api/axios";

const loading = ref(false);
const notificationSettings = reactive({
  // 订单通知
  newOrder: true,
  orderCancel: true,
  orderRefund: true,
  orderTimeout: true,

  // 商品通知
  stockWarning: {
    enabled: true,
    threshold: 10,
  },
  offShelf: true,

  // 评价通知
  newComment: true,
  badComment: true,

  // 营销通知
  promotionStart: true,
  promotionEnd: true,

  // 财务通知
  withdrawSuccess: true,
  settlementComplete: true,
});

// 获取商户通知设置
const fetchNotificationSettings = async () => {
  loading.value = true;
  try {
    const response = await axios.get("/merchant/notification/settings");
    if (response.data) {
      // 合并设置，确保保留默认值
      Object.assign(notificationSettings, response.data);
    }
  } catch (error) {
    console.error("获取通知设置失败:", error);
  } finally {
    loading.value = false;
  }
};

// 保存商户通知设置
const handleSaveSettings = async () => {
  loading.value = true;
  try {
    await axios.post("/merchant/notification/settings", notificationSettings);
    Message.success("通知设置已保存");
  } catch (error) {
    console.error("保存通知设置失败:", error);
    Message.error("保存设置失败，请稍后重试");
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchNotificationSettings();
});
</script>

<style lang="scss" scoped>
.settings-notification {
  .settings-card {
    margin-bottom: 1.5rem;
  }

  .settings-group {
    margin-bottom: 2rem;

    .group-title {
      font-size: 1rem;
      font-weight: 500;
      margin-bottom: 1rem;
      color: var(--color-text-1);
    }
  }

  .setting-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;

    span {
      font-weight: 500;
    }
  }

  .setting-desc {
    font-size: 0.875rem;
    color: var(--color-text-3);
  }
}
</style>
